<script setup lang="ts">
import { reactive } from "vue";
import UserInfo from "./components/UserInfo.vue";
import Icon1 from "@/assets/images/my-icon1.svg";
import Icon2 from "@/assets/images/my-icon2.svg";
import Icon3 from "@/assets/images/my-icon3.svg";
import { useRouter } from "vue-router";
const router = useRouter();

const list = reactive([
  {
    title: "个人信息",
    icon: Icon1,
    url: "/base/userInfo",
  },
  {
    title: "我的组织",
    icon: Icon2,
    url: "/sm",
  },
  {
    title: "账户设置",
    icon: Icon3,
    url: "/base/accountSettings",
  },
]);

const onDetail = (pathname: string) => {
  router.push(pathname);
};
</script>

<template>
  <div class="min-h-full">
    <UserInfo />
    <div class="list">
      <van-cell
        v-for="item in list"
        :key="item.url"
        is-link
        class="cell"
        @click="onDetail(item.url)"
      >
        <template #title>
          <div class="cell-title">
            <img class="icon" :src="item.icon" alt="" />
            <span>{{ item.title }}</span>
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list {
  margin-top: var(--margin-value);
  &:active {
    background: red;
  }
  .cell {
    padding: var(--padding-value);
    &-title {
      display: flex;
      align-items: center;
      span {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 400;
        font-size: var(--lg-font-size);
      }
      img {
        height: 32px;
        width: auto;
        object-fit: contain;
        margin-right: var(--margin-value);
      }
    }
    :deep(.van-cell__right-icon) {
      font-weight: bold;
      align-self: center;
    }
  }
}
</style>
